// 发送Ajax

let form = layui.form;
let layedit = layui.layedit
let layer = layui.layer;

axios({
    method: 'GET',
    url: '/my/article/cates',
}).then(({
    data: res
}) => {
    const getDate = res.data.map(item => {
        const {
            name
        } = item
        return `<option value="${name}">${name}</option>`
    })
    $('[name=cate_id]').append(getDate)
    console.log(getDate);
    // 表单的更新
    form.render()
})


layui.use('layedit', function () {
    layedit.build('id', {
        height: 180 //设置编辑器高度
    });
    layedit.build('demo'); //建立编辑器
});


// 1. 初始化图片裁剪器
var $image = $('#image')

// 2. 裁剪选项
var options = {
    aspectRatio: 400 / 280,
    preview: '.img-preview'
}

// 3. 初始化裁剪区域
$image.cropper(options)


// 4.点击选择封面按钮 触发上传文件的点击事件
$('.layui-btn-danger').on('click', function () {
    $('#file').click()
})

// 判断上传文件 是否进行了选择文件  change事件
$('#file').on('change', function (e) {
    // 获取到用户 上传的文件
    let file = e.target.files
    // 进行判断
    if (!file.length) {
        return layer.msg('请上传图片')
    }
    // url/creatObjectURl()  选择文件创建对应的URL地址
    let newImgURL = URL.createObjectURL(file[0])

    $image
        .cropper('destroy') // 销毁旧的裁剪区域
        .attr('src', newImgURL) // 重新设置图片路径
        .cropper(options) // 重新初始化裁剪区域
})

// 因为 我们分为发布和草稿状态 设置默认默认状态 
let addState = '已发布'
// 如果我们点击的是 左侧按钮的草稿 就把状态修改为 "草稿"
$('#cg').on('click', function () {
    addState = '草稿'
})

// 因为api规定 发送forDate 类型数据 先是基于form表单来获取
$('#formAdd').on('submit', function (e) {
    // 阻止默认行为
    e.preventDefault()
    let fd = new FormData($(this)[0])
    fd.append('state', addState)

    $image
        .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
            width: 400,
            height: 280
        })
        .toBlob(function (blob) { // 将 Canvas 画布上的内容，转化为文件对象
            // 得到文件对象后，进行后续的操作
            fd.append('cover_img', blob)
            console.log(...fd);
            // 发送Ajax请求
            getAjax(fd)
        })


})

function getAjax(fd) {
    // 发送Ajax 
    axios({
        method: 'POST',
        url: '/my/article/add',
        data: fd
    }).then(({
        data: res
    }) => {
        const {
            status,
            message
        } = res
        if (status) {
            return layer.msg(message, {
                icon: 2
            })
        }
        layer.msg('恭喜 成功发布文章', {
            icon: 1
        })
        location.href = '/article/article_list.html'
    })

}




// 点击发布 发送Ajax 